import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
const models = import.meta.glob('@/views/draw/img/*.jpeg')
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
export class Init {
  dom: any
  width: number = 0
  height: number = 0
  scene: any // 场景
  directionalLight: any // 平行光
  ambientLight: any // 环境光
  camera: any // 摄像机
  renderer: any // 渲染器
  controls: any // 控制器
  constructor(dom: HTMLElement, id: string) {
    this.dom = dom
  }
  init() {
    // 获取容器宽高
    this.width = this.dom.value.clientWidth
    this.height = this.dom.value.clientHeight
    // 初始化三维场景
    this.scene = new THREE.Scene()
    this.ambientLight = new THREE.AmbientLight(0xffffff, 0.6)
    this.directionalLight = new THREE.DirectionalLight(0xfffdd3, 1)

    this.scene.add(this.directionalLight)
    this.scene.add(this.ambientLight)
    var helper = new THREE.AxesHelper(50)
    this.scene.add(helper)

    // 创建摄像机
    this.camera = new THREE.PerspectiveCamera(
      50,
      this.width / this.height,
      3,
      1000
    )

    this.camera.position.set(10, 10, 10) //设置相机位置
    this.camera.lookAt(0, 0, 0) // 观看位置
    this.initCar()
    // 渲染器
    this.renderer = new THREE.WebGLRenderer()
    this.renderer.setClearColor('#f2f2f2', 1.0)
    let cubeLoader = new THREE.CubeTextureLoader()
    let bj = [
      '/image/posx.jpg',
      '/image/negx.jpg',
      '/image/posy.jpg',
      '/image/negy.jpg',
      '/image/posz.jpg',
      '/image/negz.jpg',
    ]
    // this.scene.background = cubeLoader.load(bj)
    this.renderer.setPixelRatio(window.devicePixelRatio)
    this.renderer.autoClear = false
    this.renderer.shadowMap.enabled = true
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
    this.renderer.setSize(this.width, this.height)
    this.dom.value.appendChild(this.renderer.domElement)
    //创建控制器
    this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    // this.controls.target.set(0, 5, 0)
    // // this.controls.maxPolarAngle = (1 * Math.PI) / 2;
    // //惯性
    this.controls.enableDamping = true
    // //动态阻尼系数 就是鼠标拖拽旋转灵敏度
    this.controls.dampingFactor = 0.1
    // //是否缩放
    this.controls.enableZoom = true
    // //右键拖拽
    this.controls.enablePan = true
    // //是否自动旋转
    this.controls.autoRotate = true
    // //设置相机距离原点的最远距离
    this.controls.minDistance = 1
    // //设置相机距离原点的最远距离
    this.controls.maxDistance = 2000
    this.controls.addEventListener('change', () => {
      this.renderer.render(this.scene, this.camera)
    })
  }
  initCar() {
    let loader = new STLLoader()
    let mesh
    loader.load(`./runCar.stl`, (geometry) => {
      const material = new THREE.MeshLambertMaterial({ color: 0x7777ff })
      mesh = new THREE.Mesh(geometry, material)
      mesh.rotation.x = 0
      mesh.rotation.y = 0
      mesh.rotation.z = 0
      mesh.position.set(-430, -55, 205)
      mesh.name = 'car'
      //设置物体大小
      mesh.scale.set(0.1, 0.1, 0.1)
      mesh.rotateX(Math.PI / -2)
      this.scene.add(mesh)
    })
  }
}
